import React from 'react'

class App extends React.Component {

    constructor() {
        super()
        this.state = {
            active: "Header"
        }
    }
    //函数式编程思想
    render() {
        // if switch
        const { active } = this.state;
        switch(active) {
            case"Header":
            return <header>
            <nav>
                <ul>
                    {
                        ['首页', '新闻', '关于'].map(i => <h1 key={i}>{i}</h1>)
                    }
                </ul>
            </nav>
        </header>
        default:
            return <div>
                我是中间主体区
            </div>
        }
        // if (active === 'Header') {
        //     return <header>
        //         <nav>
        //             <ul>
        //                 {
        //                     ['首页', '新闻', '关于'].map(i => <h1 key={i}>{i}</h1>)
        //                 }
        //             </ul>
        //         </nav>
        //     </header>
        // }
        return <div>
            我是中间主题区
        </div>
    }
}

export default App